<template>
  <div class="parent-component">
    <pagination :page="page" :pages="totalPages" :width="20" @change="onPageChange" :pageFn="pageFn"></pagination>
  </div>
</template>

<script>
  const Pagination = require('vue-bootstrap-paginator')

  module.exports = {
            data: () => ({
            totalPages: 15,
          }),
          components: { Pagination },
  methods: {
    onPageChange: function (page) {
      console.log('New page: %s', page)
      this.$router.push(this.pageFn(page))
    },
    pageFn: function (page) {
      return `./${page}`
    },
    handleKeyUp: function (event) {
      if (event.keyCode === 39 && this.page < this.totalPages) {
        this.$router.push(this.pageFn(this.page + 1))
      }
      if (event.keyCode === 37 && this.page > 1) {
        this.$router.push(this.pageFn(this.page - 1))
      }
    },
  },
  computed: {
    page: function () {
      // when route param changes, change the page
      return Number(this.$route.params.page) || 1
    },
  },
  created: function () {
    window.addEventListener('keyup', this.handleKeyUp)
  },
  beforeDestroy: function () {
    window.removeEventListener('keyup', this.handleKeyUp)
  },
  }
</script>